import React, {useEffect, useState} from 'react'
import {cyDateGap, cyGet} from "@/common/request";
import {Link} from "react-router-dom";
import config from "@/config/config";
import './index.scss'

const baseURL = config.api.baseURL
const post = config.api.post
const home = config.main.home
const wls = window.localStorage
const token = window.localStorage.XB_token

interface PostCardProps {
  key: string
  nickname?: string
  post?: any
  avatar?: string
  myself?: any
  level?: any
}

function PostCard(props: PostCardProps) {

  const [tagList, setTagList] = useState([])
  const [imgList, setImgList] = useState([])

  function getDetailInfo(id: any) {
    setImgList([])
    setTagList([])
    /*cyGet('tag列表', baseURL + post.base + post.view, {token: token, id: id}
    ).then((data: any) => {
      console.log('[帖子详情data]', data);
      const contentData = data.postDto.post.content
      const imgTempList = contentData.match(/(?<=!\[.*\]\()(.+)(?=\))/mg)
      if (imgTempList)
        setImgList(imgTempList.length > 3 ? imgTempList.slice(0, 3) : imgTempList)
      setTagList(data.tagList)
    })*/
  }

  useEffect(() => {
    getDetailInfo(props.post.id)
  }, [props.post.id])

  return (
    <div className="post-card">
      <div className="unit-user">
        <span className="avatar"
              style={{backgroundImage: `url(${props.avatar})`, display: props.myself === true ? 'none' : ''}}/>
        <span className="nickname" style={{display: props.myself === true ? 'none' : ''}}>
          {props.nickname}
        </span>
        <span className="level" style={{display: props.myself === true ? 'none' : ''}}>Lv.{props.level}</span>
        <span className="post-user-info">
          <span className="created_at">发表: {cyDateGap(props.post.createdAt)}</span>
          <span className="updated_at">更新: {cyDateGap(props.post.updatedAt)}</span>
        </span>
      </div>

      <Link
        className="unit-post-main"
        to={`${home.postLinkPrefix}${props.post.id}`}
        onClick={() => {
          wls.setItem('XB_post_id_now', props.post.id)
        }}
      >
        <div className="post-main-title">
          {props.post.category ? <span className="organization">{props.post.category}</span> : ""}
          <span className="title">{props.post.title}</span>
        </div>

        <div className="post-main-summary">
          {/* <textarea className="content" rows="3">{props.post.content.replace(/!\[.*\]\(.*\)/mg, '').replace(/\n/mg, '')}</textarea> */}
          <textarea
            rows={3}
            className="content"
            value={props.post.content.replace(/!\[.*\]\(.*\)/mg, '').replace(/\n/mg, '')}
            readOnly={true}
          />
          {/* <ReactMarkdown className="content">{props.post.content.replace(/!\[.*\]\(.*\)/mg, '').replace(/\n/mg, '')}</ReactMarkdown> */}
        </div>

        {/* 显示文章内容中图片的缩略图，该模块暂缓开发 */}
        <div className="post-main-img" style={{display: imgList.length > 0 ? '' : 'none'}}>
          {imgList ? imgList.map((item, index) => {
            return (
              <div className='thumbnail' key={index} style={{backgroundImage: `url(${item})`}}/>
            )
          }) : ''}
        </div>
      </Link>

      <div className="unit-post-info">
        <div className="tags">
          {tagList.map((item: any, index) => {
            return (
              <span key={index} style={{display: item.name ? '' : 'none'}}>{item.name}</span>
            )
          })}
        </div>

        <div className="data">
          <span className="data-inner-box view">
            <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 data-spm-anchor-id="a313x.7781069.0.i23">
              <path
                d="M512 158.087529c-282.774588 0-512 309.729882-512 355.538824C0 559.435294 229.225412 869.195294 512 869.195294s512-306.507294 512-355.568941C1024 464.564706 794.774588 158.117647 512 158.117647z m312.048941 519.529412c-47.826824 40.688941-97.249882 72.884706-146.913882 95.713883-56.350118 25.840941-112.037647 38.972235-165.436235 38.972235-53.248 0-108.754824-13.191529-165.044706-39.213177-49.543529-22.919529-98.936471-55.296-146.853647-96.256a789.202824 789.202824 0 0 1-106.616471-110.592c-18.311529-23.371294-29.816471-41.200941-36.291765-52.585411 6.505412-11.414588 18.040471-29.244235 36.321883-52.585412a789.232941 789.232941 0 0 1 106.61647-110.652235c47.887059-40.96 97.28-73.366588 146.853647-96.256 56.259765-26.021647 111.766588-39.213176 165.014589-39.213177 53.428706 0 109.086118 13.131294 165.436235 39.002353 49.694118 22.799059 99.087059 54.994824 146.913882 95.683765a771.915294 771.915294 0 0 1 106.405647 110.230588c18.913882 24.154353 30.418824 42.465882 36.653177 53.76-6.234353 11.324235-17.769412 29.575529-36.653177 53.76a771.915294 771.915294 0 0 1-106.405647 110.230588z"
                fill="#CCCCCC"/>
              <path
                d="M656.775529 382.735059a184.862118 184.862118 0 1 0-261.12 261.722353 184.862118 184.862118 0 0 0 261.12-261.722353z m-130.951529 239.22447a108.242824 108.242824 0 1 1 0-216.485647 108.242824 108.242824 0 0 1 0 216.485647z"
                fill="#CCCCCC"/>
            </svg>
            <span>{props.post.viewCount}</span>
          </span>
          <span className="data-inner-box reply">
            <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M512 64a448 448 0 1 1-230.08 832.448l-21.056-12.352-109.632 29.952a33.6 33.6 0 0 1-41.216-41.28l29.824-109.504c-11.52-19.648-19.136-32.768-22.912-39.808A448 448 0 0 1 512 64z m0 64a384 384 0 0 0-338.624 565.184c3.84 7.36 13.632 24.192 28.928 50.048a33.92 33.92 0 0 1 3.584 26.176l-18.304 67.008 67.008-18.304a33.92 33.92 0 0 1 25.984 3.456c11.456 6.592 22.848 13.312 34.24 20.032A384 384 0 1 0 512 128zM320 448a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m192 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m192 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128z"
                fill="#CCCCCC"/>
            </svg>
            <span>{props.post.replyCount}</span>
        </span>
          <span className="data-inner-box like">
            <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M527.232 94.336c32.128-31.744 83.008-39.68 131.2-18.56 45.568 18.56 75.008 52.992 75.008 90.048 0 52.928-37.504 135.04-61.568 185.28h187.392c29.44 0 58.88 13.248 77.696 37.12 18.752 21.12 26.752 52.928 21.44 82.048l-75.008 386.496c-10.688 60.864-64.256 103.232-125.824 103.232h-640A53.44 53.44 0 0 1 64 907.072V430.528c0-29.12 24.128-52.928 53.568-52.928h155.328a32 32 0 0 1 13.376-13.248c66.944-47.616 115.136-89.984 131.2-108.544 40.128-55.552 58.88-84.672 69.632-105.856 10.688-21.184 18.752-34.432 40.128-55.616z m109.824 31.808c-21.44-8-53.568-10.624-72.32 7.936-13.44 13.184-18.752 23.808-29.44 42.304-13.44 23.872-32.128 55.68-75.008 113.92-24.064 29.056-91.008 81.984-141.888 119.04a32.448 32.448 0 0 0-13.44 26.496v471.232h452.608c34.816 0 66.88-26.496 72.32-60.928l74.88-386.496c2.752-13.184 0-29.12-8-37.056a53.12 53.12 0 0 0-37.504-15.872h-232.96a28.16 28.16 0 0 1-24.064-13.248 23.808 23.808 0 0 1 0-26.432c21.376-37.12 77.632-148.288 77.632-198.592 0-13.184-16-31.744-42.88-42.304zM251.456 430.528H117.568v476.544h133.888V430.528z"
                fill="#CCCCCC"/>
            </svg>
            <span>{props.post.likeCount}</span>
          </span>
        </div>
      </div>
    </div>
  )
}

export default PostCard
